<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<script>
    function doStuff() {
        // 执行某种任务......
    }

    function doOtherStuff() {

    }

    window.onload = doOtherStuff;

    function readyCompact() {
        $(function () {
            // 这里是代码......
        });
    }

    function onConflict() {
        jQuery.onConflict();
    }

    function jQ() {
        jQuery(document).ready(function ($) {
            // 在这里，可以正常使用！
        });

        //or
        jQuery(function ($) {
            // 使用 $ 的代码
        });
    }

    function large() {
        $('body').addClass('large');
    }

    function largeButton() {
        $(document).ready(function () {
            $('#switcher-large').on('click', function () {
                $('body').addClass('large');
            });
        });
    }

    function otherButtons() {
        $(document).ready(function () {
            $('#switcher-default').on('click', function () {
                $('body').removeClass('narrow large');
            });
            $('#switcher-narrow').on('click', function () {
                $('body').addClass('narrow').removeClass('large');
            });
            $('#switcher-large').on('click', function () {
                $('body').removeClass('narrow').addClass('large');
            });
        });
    }

    function selected() {
        $(this).addClass('selected');
        $('#switcher button').removeClass('selected');
    }

    function shorthandEvent() {
        $('#switcher-default').addClass('selected');
        $('#switcher button').click(function () {
            var bodyClass = this.id.split('-')[0];
            $('body').removeClass().addClass(bodyClass);
            $('#switcher button').removeClass('selected');
            $(this).addClass('selected');
        });
    }

    function hidden() {
        $(document).ready(function () {
            $('#switcher h3').click(function () {
                $('#switcher button').toggleClass('hidden');
            });
        });
    }

    function reversal() {
        $(document).ready(function () {
            $('#switcher h3').hover(function () {
                $(this).add('hover');
            }, function () {
                $(this).removeClass('hover');
            });
        });
    }

    function eventObject() {
        $(document).ready(function () {
            $('#switcher').click(function (e) {
                $('#switcher button').toggleClass('hidden');
            });
        });
    }

    function eventEqualThis() {
        $(document).ready(function () {
            $('#switcher').click(function (e) {
                if (e.target == this) {
                    $('#switcher button').toggleClass('hidden');
                }
            });
        });
    }

    function stopPropagation() {
        $(document).ready(function () {
            $('#switcher').click(function () {
                $('#switcher button ').toggleClass('hidden');
            });

            $('#switcher-default').addClass('selected');
            $('#switcher button').click(function (e) {
                var bodyClass = this.id.split('-')[1];
                $('body').removeClass().addClass(bodyClass);
                $(this).addClass('selected');
                e.stopPropagation();
            });
        });
    }

    function preventDefault() {
        // e.preventDefault()
    }

    function command() {
        $(document).ready(function () {
            $('#switcher').click(function (e) {
                if ($(e.target).is('button')) {
                    var bodyClass = e.target.id.split('-')[1];
                    $('body').removeClass().addClass(bodyClass);
                    $('#switcher button').removeClass('selected');
                    $(e.target).addClass('selected');
                    e.stopPropagation();
                }
            });
        });
    }

    function isMethods() {
        $(document).ready(function () {
            $('#switcher').hover(function () {
                $(this).addClass('hover');
            });
        }, function () {
            $(this).removeClass('hover');
        });

        $(document).ready(function () {
            $('#switcher').click(function (e) {
                if (!$(e.target).is('button')) {
                    $('#switcher button').toggleClass('hidden');
                }
            });
        });

        $(document).ready(function () {
            $('#switcher-default').addClass('selected');
            $('#switcher').click(function (e) {
                if ($(e.target).is('button')) {
                    var bodyClass = e.target.id.split('-')[1];
                    $('body').removeClass().addClass(bodyClass);
                    $('#switcher button').removeClass('selected');
                    $(e.target).addClass('selected');
                }
            });
        });
    }

    function refactor() {
        $(document).ready(function () {
            $('#switcher-default').addClass('selected');
            $('#switcher').click(function (e) {
                if ($(e.target).is('button')) {
                    var bodyClass = e.target.id.split('-')[1];
                    $('body').removeClass().addClass(bodyClass);
                    $('#switcher button').removeClass('selected');
                    $(e.target).addClass('selected');
                } else {
                    $('#switcher button').toggleClass('hidden');
                }
            });
        });
    }

    function on() {
        $('#switcher').on('click', 'button', function (e) {
            var bodyClass = e.target.id.split('-')[1];
            $('body').removeClass().addClass(bodyClass);
            $('#switcher button').removeClass('selected');
            $(this).addClass('selected');
        });
    }

    function off() {
        $(document).ready(function () {
            $('#switcher').click(function (e) {
                if (!$(e.target).is('button')) {
                    $('#switcher button').toggleClass('hidden');
                }
            });

            $('#switcher-narrow, #switcher-large').off('click');
        });
    }

    function eventNamspace() {
        $(document).ready(function () {
            $('#switcher').on('click.collapse', function (e) {
                if (!$(e.target).is('button')) {
                    $('#switcher button').toggleClass('hidden');
                }
            });

            $('#switcher-narrow, #switcher-large').click(function () {
                $('#switcher').off('click.collapse');
            });
        });
    }

    function rebinding() {
        $(document).ready(function () {
            var toggleSwitcher = function (e) {
                if (!$(e.target).is('button')) {
                    $('#switcher button').toggleClass('hidden');
                }
            };
            $('#switcher').on('click.collapse', toggleSwitcher);
        });
    }

    function call() {
        $(document).ready(function () {
            var toggleSwitcher = function (e) {
                if (!$(e.target).is('button')) {
                    $('#switcher button').toggleClass('hidden');
                }
            };

            $('#switcher').on('click.collapse', toggleSwitcher);
            $('#switcher-narrow, #switcher-large').click(function () {
                $('#switcher').off('click.collapse');
            });

            $('#switcher-default').click(function () {
                $('#switcher').on('click.collapse', toggleSwitcher);
            })
        });
    }

    function even() {
        $(document).ready(function () {
            var toggleSwitcher = function (e) {
                if (!$(e.target).is('button')) {
                    $('#switcher button').toggleClass('hidden');
                }
            };

            $('#switcher').on('click', toggleSwitcher);
            $('#switcher button').click(function () {
                $('#switcher').off('click', toggleSwitcher);
                if (this.id == 'switcher-defalut') {
                    $('#switcher').on('click', toggleSwitcher);
                }
            });
        });
    }

    function one() {
        var toggleSwitcher = function (e) {
            if (!$(e.target).is('button')) {
                $('#switcher button').toggleClass('hidden');
            }
        };

        $('#switcher').one('click', toggleSwitcher);
    }

    function trigger() {
        $(document).ready(function () {
            $('#switcher').trigger('click');
        });
    }

    function click() {
        $(document).click();
    }

    function keyup() {
        $(document).ready(function () {
            var triggers = {
                D: 'default',
                N: 'narrow',
                L: 'large'
            };

            $(document).keyup(function (e) {
                var key = String.fromCharCode(e.keyCode);
                if (key in triggers) {
                    $('#switcher-' + triggers[key]).click();
                }
            });
        });
    }

    function completeCode() {
        $(document).ready(function () {
            $('#switcher').hover(function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover');
            });

            var toggleSwitcher = function (e) {
                if (!$(e.target).is('button')) {
                    $('#switcher button').toggleClass('hidden');
                }
            };

            $('#switcher').on('click', toggleSwitcher);
            $('#switcher').click();

            var setBodyClass = function (className) {
                $('body').removeClass().addClass(className);
                $('#switcher button').removeClass('selected');
                $('#switcher-' + className).addClass('selected');
                $('#switcher').off('click', toggleSwitcher);
                if (className == 'default') {
                    $('#switcher').on('click', toggleSwitcher);
                }
            };
            $('#switcher').addClass('selected');
            var triggers = {
                D: 'default',
                N: 'narrow',
                L: 'large'
            };
            $('#switcher').click(function (e) {
                if ($(e.target).is('button')) {
                    var bodyClass = e.target.id.split('-')[1];
                    setBodyClass(bodyClass);
                }
            });

            $(document).keyup(function (e) {
                var key = String.fromCharCode(e.keyCode);
                if (key in triggers) {
                    setBodyClass(triggers[key]);
                }
            });
        });
    }
</script>
</body>
</html>